<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="__PUBLIC__/Css/Admin/Bootstrap/bootstrap.min.css" rel="stylesheet"  >
<link href="__PUBLIC__/Js/jqui/jquery-ui.min.css" rel="stylesheet"  >
<script src='__PUBLIC__/Js/jquery-3.1.0.min.js'></script>
<script src='__PUBLIC__/Js/jqPaginator.js'></script>
<script src='__PUBLIC__/Js/jqui/jquery-ui.min.js'></script>

<style>
	#dialog-confirm,#dialog-confirm2,#dialog-confirm3{		
			display:none;
		}
	#msg{
		display:none;
		position:fixed;
		left:400px;
		top:100px;
		z-index:100;	
		}
</style>
</head>
<body> 
<div id="dialog-confirm" >
	     <h3>商品顶级分类</h3>
		 <p>顶级分类:<input type="text" name='cate_name' /></p>
		 <p>分类描述:<input type="text" name='desc' /></p>
		 商品类型:<select name='type' id='type'>
			 	    <volist name='type' id='vo'>
			 	       <option value="<{$vo.id}>"><{$vo.type_name}></option>
					</volist>
		       </select>
</div>
<div id="dialog-confirm2" >
	     <h3>商品子分类</h3>
			<p>分类名<input type="text" name='cate_name2'/></p>
			<p>描&nbsp;&nbsp;&nbsp;述<input type="text" name='desc2'/></p>
			 商品类型<select name='type' id='type2'>
				 	    <volist name='type' id='vo'>
				 	       <option value="<{$vo.id}>"><{$vo.type_name}></option>
						</volist>
			       </select>
			
</div>
<div id="dialog-confirm3" >
	     <h3>商品分类修改</h3>
		    <p>分类等级<select name='types' id='types3'>
				 	    <volist name='cate' id='vo'>
				 	       <option value="<{$vo.id}>"><{$vo.cate_name}></option>
						</volist>
			       </select>
			</p>
			<p>分类名&nbsp;<input type="text" name='cate_name3'/></p>
			<p>描&nbsp;&nbsp;&nbsp;&nbsp;述<input type="text" name='desc3'/></p>
			 商品类型<select name='type' id='type3'>
				 	    <volist name='type' id='vo'>
				 	       <option value="<{$vo.id}>"><{$vo.type_name}></option>
						</volist>
			       </select>
			
</div>	
<div id='msg' class="btn btn-warning" style=""></div>	
<table class='table table-striped'> 
 <thead>
 <tr>
     <th colspan='6'>
         当前位置:商品管理>>商品分类列表
     </th>
 </tr>
 <tr>
 	<td colspan='5'></td>
     <td>
         <button type='button' name='but_addtop' class='btn btn-primary'>添加顶级分类</button>    
     </td>
 </tr>
 <tr> 
     <th> ID</th>
     <th>分类名 </th>
     <th>分类等级 </th>
     <th>商品类型</th>
     <th>分类描述</th>
     <th>操作</th>
 </tr>
 </thead>
 <volist name='types' id='v'>
     <tbody>
      <tr id="cate_<{$v.id}>" >
         <td> <{$v.id}></td>
         <td><{$v.cate_name}></td>
         <td><if condition="$v.fid eq 0"><font color="red"><b>顶级分类</b></font><else/>&nbsp;&nbsp;&nbsp;&nbsp;二级分类</if></td>
         <td> <{$v.type_name}> </td>
         <td><{$v.cate_desc}></td>
         <td>
         	<if condition='$v.fid eq 0'>
               <button type='button' data-id="<{$v.id}>" name='but_add' class='btn btn-primary'> 添加下级分类</button>&nbsp;
			   <else/>
			  <span style='margin-left:110px;'>&nbsp;</span>
			 </if>                
                <button type='button'data-id='<{$v.id}>' name='but_edit' class='btn btn-success'>编辑</button>&nbsp;
                <button type='button' data-id="<{$v.id}>" name='but_del' class='btn btn-danger'>删除</button>  
         </td>
     </tr>
     </tbody>
 </volist>
   </table>
<script>
	$(function(){
		//添加顶级分类
		$(document).on('click','[name=but_addtop]',function(){
		   $("#dialog-confirm").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'添加确认',
		      buttons: {
		        "确认": function() {	
				var cate_name=	$("[name='cate_name']").val();								
				var desc=	$("[name='desc']").val();								
				var type_id=$("#type :selected").val();		
				if(cate_name=='' || desc==''){
					$('#msg').text("数据填写不完整");
				    setTimeout(function(){$('#msg').fadeOut('slow');},2000);
					return false;
				}						
			  	$.get("<{:U('docateadd')}>",{cate_name:cate_name,fid:0,type_id:type_id,cate_desc:desc},function(data){
					if(data.status==1){	        
							$('#msg').text(data.msg);
							$('#msg').show();
							setTimeout(function(){$('#msg').fadeOut('slow');},400000);
							location.reload();
						}else{
							$('#msg').text(data.msg);
							$('#msg').show();
						    setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
			
		          $( this ).dialog( "close" );
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });	
		})
		//添加下级分类
		$(document).on('click','[name=but_add]',function(){ 
			var id=$(this).attr('data-id');
		   $("#dialog-confirm2").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'添加确认',
		      buttons: {
		        "确认": function() {	
				var cate_name2=	$("[name='cate_name2']").val();								
				var desc2=	$("[name='desc2']").val();								
				var type_id=$("#type2 :selected").val();		
				if(cate_name2=='' || desc2==''){
					$('#msg').text("数据填写不完整");
				    setTimeout(function(){$('#msg').fadeOut('slow');},2000);
					return false;
				}						
			  	$.get("<{:U('docateadd')}>",{cate_name:cate_name2,fid:id,type_id:type_id,cate_desc:desc2},function(data){
					if(data.status==1){	
							$('#msg').text(data.msg);
							$('#msg').show();
							setTimeout(function(){$('#msg').fadeOut('slow');},40000);
							location.reload();
						}else{
							$('#msg').text(data.msg);
							$('#msg').show();
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
			
		          $( this ).dialog( "close" );
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });	
		})
		
		//编辑
		$(document).on('click','[name=but_edit]',function(){
			 var id=$(this).attr('data-id');
			 $.get("<{:U('editcate')}>",{id:id},function(data){
					$("#types3 option[value="+data.id+"]").attr("selected","selected");
					$("[name='cate_name3']").val(data.cate_name);
					$("[name='desc3']").val(data.cate_desc);
					$("#type3 option[value="+data.type_id+"]").attr("selected","selected");
				},'json');
			$("#dialog-confirm3").dialog({
		      resizable: false,
		      height: "auto",
		      width: 400,
		      modal: true,
			  title:'修改确认',
		      buttons: {
		        "确认": function() {
			    var fid=$("#types3 :selected").val();
				var name3=	$("[name='cate_name3']").val();	
				var type_id=$("#type3 :selected").val();
				var desc3=	$("[name='desc3']").val();	
			  	$.get("<{:U('docateEdit')}>",{id:id,cate_name:name3,fid:fid,type_id:type_id,cate_desc:desc3},function(data){
					if(data.status==1){	
					        location.reload();
							$('#msg').text(data.msg);
							$('#msg').show();
							setTimeout(function(){$('#msg').fadeOut('slow');},40000);
						}else{
							$('#edit').hide();
							$('#msg').text(data.msg);
							$('#msg').show();
						setTimeout(function(){$('#msg').fadeOut('slow');},2000);		
						}
				},'json')
			
		          $( this ).dialog( "close" );
		        },
		        "取消": function() {
		          $( this ).dialog( "close" );
		        }
		      }
		    });
		  });
  //删除
	$(document).on('click','[name=but_del]',function(){	
	    var id=$(this).attr('data-id');
		$( "<div>删除后不可恢复！确定要删除？</div>" ).dialog({
	     title:'删除确认',
		 modal: true,
	      buttons: {
	        "确定": function() {
				$(this ).dialog( "close" ); 
			$.get('<{:U("delcate")}>',{id:id},function(data){
					if(data.status==1){
					   $("#cate_"+id).remove();
						$('#msg').text(data.msg);
						$('#msg').show();	
						setTimeout(function(){$('#msg').fadeOut('slow')},1000);			
					}else{			
						$('#msg').text(data.msg);
						$('#msg').show();
					setTimeout(function(){$('#msg').fadeOut('slow');},1000);		
					}
				},'json');	
	        },
	        "取消": function() {
	          $( this ).dialog( "close" );
	        }
	      }
	    });
	    });		  
		  
		  
   
	});
</script>
</body>
</html>	
